<template>
	<div class="h100">
		<MkDragSplitPanel style="height: 100%;" leftWidth="350px">
			<template #left>
				<MKShenQingDanList ref="MKShenQingDanListRef" @dblclick="listDblclick" />
			</template>
			<template #right>
				<div>
					<div class="mk-bill-panel-button">
						<MkButtonAdd @click="newEntity" :isEdit="ctx.isEdit" />
						<MkButtonSubmit @click="submit" :loading="ctx.loading" :color="getThemeAdjustColor(10)" />
					</div>
					<MkPanel title="标本信息">
						<MkForm :col="3">
							<MkScanInput v-if="ctx.isEdit" ref="shenQingDanHaoRef" placeholder="扫描申请单号或标本号"
								width="600px" @onEnter="enterDanHao" class="mb-4" />
							<MkInput v-model.trim="ctx.shenQingDanHao" label="申请单号" :isEdit="false" :col="3" />
							<MkInput v-model.trim="ctx.biaoBenHao" label="标本号" :isEdit="false" :col="3" />
							<MkSelectUser label="送出人" :isEdit="ctx.isEdit" v-model="ctx.songChuRenId" :col="3" />
							<el-form-item label="患者信息" style="width: 560px;">
								<MkPatient v-model="ctx.huanZhe" />
							</el-form-item>
						</MkForm>
					</MkPanel>
					<MkPanel title="标本记录">
						<ol class="recordOl">
							<li>2025-05-21 08:49:39, 由 <b>医生2</b> <b>创建</b></li>
							<li>2025-05-21 10:10:22, 由 <b>护士1</b> <b>打印</b>标本。</li>
							<li>2025-05-21 10:12:24, 由 <b>护士2</b> <b>采集</b>标本。</li>
							<li>2025-05-21 10:28:12, 由 <b>护工1</b> <b>送出</b>标本。</li>
							<li>2025-05-22 14:57:45, 由 <b>护工1</b> <b>送达</b>标本。</li>
							<li>2025-05-29 19:31:34, 由 <b>护士5</b> <b>接收</b>标本。</li>
						</ol>
					</MkPanel>
				</div>
			</template>
		</MkDragSplitPanel>
	</div>
</template>

<script lang='ts' setup name="biaoBenGuanLi">
import { TraShenQingApi, TraShenQingHuanZheOutput, TraShenQingPageOutput } from '/@/api/tra/TraShenQing';
import { usePageQuery } from '/@/hooks/usePageQuery'
import { clog, isNull, getThemeAdjustColor } from '/@/utils'
// 定义组件的自定义事件
const emits = defineEmits(['load', "dblclick"])
// 使用分页查询钩子获取搜索参数、总数、表格数据、加载状态和搜索方法
const { searchParam, total, tableData, loading, search } = usePageQuery<TraShenQingPageOutput>(TraShenQingApi.page)
// 创建列表组件的引用
const MKShenQingDanListRef = ref()
// 定义初始化状态的函数，返回一个包含初始值的对象
const initState = () => ({
	isEdit: true,
	loading: false,
	shenQingDanHao: undefined,
	biaoBenHao: undefined,
	songChuRenId: undefined,
	huanZhe: {} as TraShenQingHuanZheOutput
})
// 使用 reactive 创建响应式对象 ctx，初始值由 initState 函数返回
const ctx = reactive(initState())
// 创建申请单号输入框的引用
const shenQingDanHaoRef = ref()
// 创建标本号输入框的引用
const biaoBenHaoRef = ref()

// 定义新建实体的函数，用于重置表单状态并聚焦到申请单号输入框
const newEntity = () => {
	// 将 ctx 对象的属性重置为 initState 函数返回的初始值
	Object.assign(ctx, initState())
	shenQingDanHaoRef.value?.clear()
	biaoBenHaoRef.value?.clear()
	// 在下一个 DOM 更新周期后，聚焦到申请单号输入框
	nextTick(() => {
		shenQingDanHaoRef.value?.focus()
	})
}

// 定义提交函数，目前为空，可后续添加提交逻辑
const submit = () => {

}

// 定义当在申请单号输入框按下回车键时触发的函数
const enterDanHao = (value) => {
	// 如果申请单号为空，则直接返回
	if (isNull(value))
		return
	ctx.shenQingDanHao = value
	// 模拟填充患者信息
	ctx.huanZhe = {
		huanZheId: '00100010',
		xingMing: '张三',
		xingBie: '男',
		chuShaiABO: 'A',
		chuShaiRhD: '+',
		nianLing: '30',
		bingQu: 'A病区',
		chuangHao: '01',
		jiuZhenLeiXing: '住院'
	} as TraShenQingHuanZheOutput
	// 在下一个 DOM 更新周期后，聚焦到标本号输入框
	nextTick(() => {
		biaoBenHaoRef.value?.focus()
	})
}

// 定义根据行数据获取信息并填充表单的函数
const getByRow = (row: any) => {
	// 如果行数据或行数据的 id 为空，则直接返回
	if (isNull(row) || isNull(row.id)) return
	// 调用 enterDanHao 函数填充患者信息并聚焦到标本号输入框
	enterDanHao(row.id)
}

// 定义表格行双击带出申请单
const handleDoubleClick = (row: TraShenQingPageOutput) => {
	emits('dblclick', row)
}

const listDblclick = (row: any) => {
	getByRow(row)
}

// 加载申请单
onMounted(() => {
	search();
	MKShenQingDanListRef.value?.changeZhuangTai('yiSongChu')
})

// 暴露给父组件的方法
defineExpose({})
</script>

<style lang='scss' scoped>
:deep(.el-tabs__content) {
	overflow: auto;
}
</style>